<template>
    <div class="admin-room-owner-details">
        <div class="info">
            <mt-cell title="用户名">
                <span>{{user.user_name}}</span>
            </mt-cell>
            <mt-cell title="手机号">
                <span>{{user.mobile}}</span>
            </mt-cell>
            <mt-cell title="用户状态" v-if="user.status">
                <span>已审核</span>
            </mt-cell>
            <mt-cell title="密码">
                <mt-button size="small" class="btn" type="primary" @click="password" :disabled="passwordLoading">
                    <span v-if="! passwordLoading">重置密码</span>
                    <mt-spinner type="triple-bounce" v-if="passwordLoading" color="white"></mt-spinner>
                </mt-button>
            </mt-cell>
            <mt-cell title="房间号">
                <span v-if="user.room">{{user.room.id}}</span>
                <mt-button
                        size="small"
                        class="btn"
                        type="primary"
                        @click="createRoom"
                        :disabled="createLoading"
                        v-if="!user.room">
                    <span v-if="! createLoading">创建房间</span>
                    <mt-spinner type="triple-bounce" v-if="createLoading" color="white"></mt-spinner>
                </mt-button>
                <mt-button
                        size="small"
                        class="btn"
                        type="primary"
                        @click="password"
                        :disabled="editLoading"
                        v-if="user.room">
                    <span v-if="! editLoading">编辑</span>
                    <mt-spinner type="triple-bounce" v-if="editLoading" color="white"></mt-spinner>
                </mt-button>
            </mt-cell>
            <mt-cell title="租期" v-if="user.room">
                <span>2018-12-12</span>
                <mt-button class="btn" size="small" type="primary">延期</mt-button>
            </mt-cell>
        </div>
        <div class="auditing" v-if="!user.status">
            <mt-button size="small" type="danger" class="sh" @click="pass" :disabled="passLoading">
                <span v-if="! passLoading">通过审核</span>
                <mt-spinner type="triple-bounce" v-if="passLoading" color="white"></mt-spinner>
            </mt-button>
        </div>
    </div>
</template>

<script>
    import methods from './methods'

    export default {
        name: "index",
        data () {
            return {
                user: {},
                passLoading: false,
                passwordLoading: false,
                createLoading: false,
                editLoading: false
            }
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.setData()
            })
        },
        methods
    }
</script>

<style scoped lang="less">
    @import "../../../../assets/css/bases";
    .btn {
        height: 25px;
        margin-left: 5px;
    }
    .auditing {
        margin-top: @big;
        display: flex;
        justify-content: center;
        align-items: center;
        .sh{
            width: 50%;
        }
    }
</style>